<template>
  <div class="window">
    <button class="b" @click="showModel">打开目标列表</button>
    <!-- 弹窗组件 绑定样式 -->
    <div class="box" v-if="isModelView" :style="dialogStyle">
      <!-- 头部区域 -->
      <div class="top" v-if="isModelView" @mousedown="mouseStart">
        <slot name="header" :title="title">
          <img src="../assets/logo.png" class="img">
          <p class="p">{{ title }}</p>
          <div class="icons">
            <i class="el-icon-minus" @click="minimize" v-if="allowMinimize"></i>
            <i class="el-icon-full-screen" @click="toggleMaximize" v-if="allowMaximize"></i>
            <i class="el-icon-close" @click="closeModel" v-if="allowClose"></i>
          </div>
        </slot>
      </div>
      <!-- 内容区域 -->
      <div class="context">
        <slot>内容</slot>
      </div>
      <!-- 四个方向 -->
      <div class="resize top-one" @mousedown="resizeStart('top')"></div>
      <div class="resize bottom" @mousedown="resizeStart('bottom')"></div>
      <div class="resize left" @mousedown="resizeStart('left')"></div>
      <div class="resize right" @mousedown="resizeStart('right')"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showHeader: {
      type: Boolean,
      default: true
    },
    allowMinimize: {
      type: Boolean,
      default: true
    },
    allowMaximize: {
      type: Boolean,
      default: true
    },
    allowClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      title: '当日实时目标列表',
      isModelView: false,
      isMaximized: false,
      isMinimized: false,
      dialogStyle: {
        top: '0px',
        left: '0px',
        width: '400px',
        height: '300px',
      },
      initialWidth: '400px',
      initialHeight: '300px',
      minWidth: '100px',
      minHight: '100px',
      maxWidth: '100%',
      maxHight: '80vh',
      startX: 0,
      startY: 0,
      startWidth: '0',
      startHeight: '0',
      resizeDirection: '',
    }
  },
  methods: {
    showModel() {
      this.isModelView = true
    },
    closeModel() {
      this.isModelView = false;
    },
    mouseStart(event) {
      this.startX = event.clientX;
      this.startY = event.clientY;
      window.addEventListener('mousemove', this.onDrag);
      window.addEventListener('mouseup', this.stopDrag);
    },
    onDrag(event) {
      if (this.isModelView) {
        const offsetX = event.clientX - this.startX;
        const offsetY = event.clientY - this.startY;
        this.dialogStyle.left = `${parseInt(this.dialogStyle.left) + offsetX}px`;
        this.dialogStyle.top = `${parseInt(this.dialogStyle.top) + offsetY}px`;
        this.startX = event.clientX;
        this.startY = event.clientY;
      }
    },
    stopDrag() {
      window.removeEventListener('mousemove', this.onDrag);
      window.removeEventListener('mouseup', this.stopDrag);
    },
    resizeStart(direction) {
      this.resizeDirection = direction;
      this.startWidth = parseInt(this.dialogStyle.width);
      this.startHeight = parseInt(this.dialogStyle.height);
      this.startX = event.clientX;
      this.startY = event.clientY;
      window.addEventListener('mousemove', this.onResize);
      window.addEventListener('mouseup', this.stopResize)
    },
    onResize(event) {
      let newWidth = this.startWidth;
      let newHeight = this.startHeight;

      if (this.resizeDirection === 'right') {
        newWidth = this.startWidth + (event.clientX - this.startX);
      } else if (this.resizeDirection === 'bottom') {
        newHeight = this.startHeight + (event.clientY - this.startY);
      } else if (this.resizeDirection === 'left') {
        newWidth = this.startWidth - (event.clientX - this.startX);
        this.dialogStyle.left = `${parseInt(this.dialogStyle.left) + (event.clientX - this.startX)}px`;
      } else if (this.resizeDirection === 'top') {
        newHeight = this.startHeight - (event.clientY - this.startY);
        this.dialogStyle.top = `${parseInt(this.dialogStyle.top) + (event.clientY - this.startY)}px`;
      }

      if (newWidth > 100 && newWidth < window.innerWidth - 50) {
        this.dialogStyle.width = `${newWidth}px`;
      }
      if (newHeight > 100 && newHeight < window.innerHeight - 50) {
        this.dialogStyle.height = `${newHeight}px`;
      }
      if (parseInt(this.dialogStyle.left) < 0) {
        this.dialogStyle.left = '0px';
      }
      if (parseInt(this.dialogStyle.top) < 0) {
        this.dialogStyle.top = '0px';
      }
      if (parseInt(this.dialogStyle.left) + newWidth > window.innerWidth) {
        this.dialogStyle.left = `${window.innerWidth - newWidth}px`;
      }
      if (parseInt(this.dialogStyle.top) + newHeight > window.innerHeight) {
        this.dialogStyle.top = `${window.innerHeight - newHeight}px`;
      }
    },
    stopResize() {
      window.removeEventListener('mousemove', this.onResize);
      window.removeEventListener('mouseup', this.stopResize);
    },
    minimize() {
      this.isModelView = false;
      this.isMinimized = true;
      this.isMaximized = false;
    },
    toggleMaximize() {
      if (this.isMaximized) {
        this.dialogStyle.width = this.initialWidth;
        this.dialogStyle.height = this.initialHeight;
        this.isMaximized = false;
      } else {
        this.dialogStyle.width = this.maxWidth;
        this.dialogStyle.height = this.maxHight;
        this.dialogStyle.top = '0px';
        this.dialogStyle.left = '0px';
        this.isMaximized = true;
      }
      this.isMaximized = false;
    },
  }
};
</script>

<style>
/* 样式保持不变 */
.b {
  width: 120px;
  height: 40px;
  border-radius: 5px;
  background-color: skyblue;
  color: white;
  font-size: 16px;
  position: absolute;
  left: -190px;
}

.window {
  position: relative;
}

.box {
  width: 400px;
  height: 500px;
  /* background-color: #00448B; */
  position: absolute;
  left: -30px;
  z-index: 99;
  display: flex;
  flex-direction: column;
}

.top {
  width: 100%;
  height: 10%;
  background-color: #E4E7E9;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  cursor: move;
}

.icon {
  width: 20px;
  height: 20px;
  left: 100px;
}

.icons {
  color: #000;
}

.img {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}

.p {
  font-size: 16px;
  color: #013280;
  margin: 0 10px;
  flex: 1;
}

.icons i {
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}

.icons .el-icon-minus:hover,
.icons .el-icon-full-screen:hover {
  color: #409eff;
}

.context {
  width: 100%;
  height: calc(100% - 10%);
  overflow: auto;
}

.box:not(.top) .context {
  height: 100%;
}

.icons {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.resize {
  position: absolute;
  background: transparent;
  z-index: 10;
}

.top-one {
  top: -5px;
  left: 0;
  right: 0;
  height: 10px;
  cursor: ns-resize;
}

.bottom {
  bottom: -5px;
  left: 0;
  right: 0;
  height: 10px;
  cursor: ns-resize;
}

.left {
  top: 0;
  bottom: 0;
  left: -5px;
  width: 10px;
  cursor: ew-resize;
}

.right {
  top: 0;
  bottom: 0;
  right: -5px;
  width: 10px;
  cursor: ew-resize;
}
</style>